<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="bottom"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <view class="content">
        <view class="margin-bottom" v-if="text">{{ text }}</view>
        <view class="title">{{ title }}</view>
        <view class="phone">{{ $data.phone }}</view>
        <view v-if="type == phoneType.custom" class="desc">
          客服工作时间：8:30至16:30
        </view>
        <view class="btn common_btn" @tap="onCall"> 直接拨打 </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import BasicConfig from "@/utils/config";
import { getConfig } from "../api/Interface/app";
import { configKeyEnum, phoneType } from "../enums/common";
import errorCode from "../utils/http/errorCode";
const $emit = defineEmits(["update:show", "close"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "联系电话",
  },
  type: {
    type: String,
    default: phoneType.custom, // custom.客服 worker.保洁师
  },
  phone: {
    type: String,
    default: "",
  },
  /** 文案 */
  text: {
    type: String,
    default: "",
  },
});
const $data = reactive({
  phone: "",
});
const close = () => {
  $emit("update:show", false);
};
const open = () => {
  init();
};
const init = () => {
  if ($props.type === phoneType.custom) {
    getConfig({ key: configKeyEnum["客服电话"], isHtml: 0 }).then((res) => {
      if (res.code === errorCode.success) {
        $data.phone = res.data.value;
      } else $data.phone = res.msg;
    });
  } else {
    $data.phone = $props.phone;
  }
};
const onCall = () => {
  uni.makePhoneCall({
    phoneNumber: $data.phone,
  });
};
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 60rpx 60rpx 0 0 !important;
    // height: 52vh;
    height: 30vh;
  }
  .content {
    background: #ffffff;
    border-radius: 60rpx 60rpx 0 0;
    height: 30vh;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 36rpx;
    }
    .phone {
      font-size: 50rpx;
      color: $main-color;
      text-align: center;
    }
    .btn {
      margin: 0;
      width: 100%;
    }
    .desc {
      text-align: center;
      color: #aaaaaa;
    }
  }
}
</style>
